<template>
  <div
    ref="resizeDialog"
    class="resizeDialog"
    :style="{
      height: dataProcessing('height'),
      width: dataProcessing('width'),
      ...dataProcessing('style'),
    }"
  >
    <div ref="resizeLeft" :class="['handle-resize', 'left', getClass('isForbidLeft')]" />
    <div ref="resizeTop" :class="['top', getClass('isForbidTop')]">
      <slot name="header"></slot>
    </div>
    <slot />
    <div ref="resizeRight" :class="['handle-resize', 'right', getClass('isForbidRight')]" />
    <div ref="resizeBottom" :class="['handle-updown', 'bottom', getClass('isForbidBottom')]" />
  </div>
</template>
<script>
export default {
  name: "ResizeBox",
  props: {
    resizeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  mounted() {
    this.dragControllerDiv(
      this.$refs.resizeDialog,
      this.$refs.resizeLeft,
      this.$refs.resizeRight,
      this.$refs.resizeBottom,
      this.$refs.resizeTop,
    );
  },
  methods: {
    dragControllerDiv: function (resizeBox, resizeLeft, resizeRight, resizeBottom, resizeTop) {
      resizeBox.style.width = this.dataProcessing("width");
      // 鼠标按下事件
      if (!this.dataProcessing("isForbidTop")) {
        // 鼠标按下事件
        resizeTop.onmousedown = (e) => {
          e.preventDefault();
          // 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
          const disX = e.clientX - resizeTop.offsetLeft;
          const disY = e.clientY - resizeTop.offsetTop;
          // 获取到的值带px 正则匹配替换
          let styL, styT;
          const sty = resizeBox.currentStyle || window.getComputedStyle(resizeBox, null);
          // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
          if (sty.left.includes("%")) {
            styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
            styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
          } else {
            styL = +sty.left.replace(/\px/g, "");
            styT = +sty.top.replace(/\px/g, "");
          }
          // 鼠标拖拽事件
          document.onmousemove = function (e) {
            // 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
            const l = e.clientX - disX;
            const t = e.clientY - disY;
            let finallyL = l + styL;
            let finallyT = t + styT;
            // 移动当前元素
            resizeBox.style.left = `${finallyL}px`;
            resizeBox.style.top = `${finallyT}px`;
          };
          document.onmouseup = function (e) {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
      if (!this.dataProcessing("isForbidRight")) {
        // 鼠标按下事件
        resizeRight.onmousedown = (e) => {
          e.preventDefault();
          let resizeWidth = resizeBox.offsetWidth;
          let data = resizeBox.getBoundingClientRect();
          console.log("=====", resizeBox.getBoundingClientRect());
          resizeBox.style = `height:${data.height}px;width:${data.width}px;left:${data.left}px;top:${data.top}px;`;
          console.log(resizeBox.style);
          let startX = e.clientX; // 水平坐标
          // 鼠标拖动事件
          document.onmousemove = (ev) => {
            let moveX = ev.clientX;
            let moveLen = resizeWidth + (moveX - startX);
            console.log(moveLen);
            if (moveLen < this.dataProcessing("maxWidth") && moveLen > this.dataProcessing("minWidth"))
              resizeBox.style.width = moveLen + "px";
          };
          // 鼠标松开事件
          document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
      if (!this.dataProcessing("isForbidBottom")) {
        resizeBottom.onmousedown = (e) => {
          e.preventDefault();
          let resizeHeight = resizeBox.offsetHeight;
          console.log(resizeBox.style);
          let startY = e.clientY; // 水平坐标
          // 鼠标拖动事件
          document.onmousemove = (ev) => {
            let moveY = ev.clientY;
            let moveLen = resizeHeight + (moveY - startY);
            console.log(moveLen);
            if (moveLen > this.dataProcessing("minHeight")) resizeBox.style.height = moveLen + "px";
          };
          // 鼠标松开事件
          document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
      if (!this.dataProcessing("isForbidLeft")) {
        resizeLeft.onmousedown = (e) => {
          e.preventDefault();
          let resizeWidth = resizeBox.offsetWidth;
          let data = resizeBox.getBoundingClientRect();
          let clientWidth = document.documentElement.clientWidth;
          resizeBox.style = `height:${data.height}px;width:${data.width}px;right:${clientWidth - data.right}px;top:${
            data.top
          }px;`;
          let startX = e.clientX; // 水平坐标
          // 鼠标拖动事件
          document.onmousemove = (ev) => {
            let moveX = ev.clientX;
            let moveLen = resizeWidth + (startX - moveX);
            if (moveLen < this.dataProcessing("maxWidth") && moveLen > this.dataProcessing("minWidth"))
              resizeBox.style.width = moveLen + "px";
          };
          // 鼠标松开事件
          document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    },
    // 配置属性
    dataProcessing(val) {
      let newObj = {
        height: (this.resizeData.height || 500) + "px",
        width: (this.resizeData.width || 390) + "px",
        minWidth: this.resizeData.minWidth || 300, // 拖拽弹框最小宽度
        maxWidth: this.resizeData.maxWidth || 1000, //拖拽弹框最大宽度
        minHeight: this.resizeData.minHeight || 100, // 弹框最小高度
        isForbidTop: this.resizeData.isForbidTop || false, // 头部是否禁止拖拽
        isForbidRight: this.resizeData.isForbidRight || false, // 右边是否禁止拖拽
        isForbidBottom: this.resizeData.isForbidBottom || false, // 底部是否禁止拖拽
        isForbidLeft: this.resizeData.isForbidLeft || false, // 左边是否禁止拖拽
        style: this.resizeData.style || { top: "150px", right: "150px" }, // 初始自定义样式
      };
      return newObj[val];
    },
    getClass(val) {
      let txt = "";
      if (!this.dataProcessing(val)) {
        txt = val == "isForbidTop" ? "topCursor" : val == "isForbidBottom" ? "cursorClassRow" : "cursorClass";
      }
      return txt;
    },
  },
};
</script>
<style lang="scss" scoped>
$borderColor: #eee;
.resizeDialog {
  width: 500px;
  height: 300px;
  position: fixed;
  top: 100px;
  right: 500px;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  .handle-resize {
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
    z-index: 102;
  }
  .handle-updown {
    position: absolute;
    height: 6px;
    width: 100%;
    // border-top: 2px solid $borderColor;
    border-bottom: 2px solid $borderColor;
    z-index: 99;
  }
  .left {
    border-left: 1px solid $borderColor;
    left: 0px;
  }
  .right {
    border-right: 1px solid $borderColor;
    right: 0px;
  }
  .bottom {
    bottom: 0;
    border-bottom: 1px solid $borderColor;
  }
  .top {
    border-top: 1px solid $borderColor;
    border-bottom: 1px solid $borderColor;
    // height: 40px;
    width: 100%;
    height: 50px;
  }
  .cursorClass {
    cursor: col-resize;
  }
  .cursorClassRow {
    cursor: row-resize;
  }
  .topCursor {
    cursor: move;
  }
}
</style>
